<template>
    <div class="app-container">
      荣誉列表
      <el-card class="operate-container" shadow="never">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="荣誉名称">
            <el-input v-model="searchObj.name" placeholder="荣誉名称"></el-input>
          </el-form-item>
          <el-form-item label="俱乐部">
            <el-select v-model="searchObj.clueId" clearable placeholder="请选择">
              <el-option
                v-for="item in clueList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="荣誉级别">
            <el-select v-model="searchObj.honorLevel" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="fetchData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="resetData">清空</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 工具按钮 -->
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets" style="margin-top: 5px"></i>
        <span style="margin-top: 5px">数据列表</span>
        <el-button class="btn-add" @click="add()" style="margin-left: 10px;">添加</el-button>
        <el-button class="btn-add" @click="batchRemove()" >批量删除</el-button>
      </el-card>
  
      <el-table :data="list" stripe border
        :row-style="{ height: '50px'}"
        :cell-style="{ padding : '0px'}"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="荣誉名称" width="200">
        </el-table-column>
        <el-table-column prop="clueValue" label="俱乐部" width="120" align="center"></el-table-column>
        <el-table-column prop="honorLevel" label="荣誉级别" width="150"  align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.honorLevel === 0">国际级</span>
                <span v-else-if="scope.row.honorLevel === 1">国家级</span>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220" sortable> </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="220" sortable> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="removeById(scope.row.id)">删除</el-button>
            <router-link :to="'/honor/honorEdit/' + scope.row.id">
              <el-button type="text" size="mini">修改</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :current-page="pageNum" :total="total" :page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" style="padding: 30px 0; text-align: center;"
        layout="total,sizes,prev, pager, next, jumper" @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </div>
  </template>

<script>

import honorApi from "@/api/honor/honor";
import clueApi from "@/api/clue/clue";
export default {
    data() {
        return {
            list: [], //列表
            total: 0, //总记录数
            pageNum: 1, //页码
            pageSize: 10, //每页记录数
            searchObj: {}, //查询条件
            clueList: [],
            multipleSelection: [], //批量删除选中的记录列表
            options: [{
              value: 0,
              label: '国际级'
            }, {
              value: 1,
              label: '国家级'
            }],
        }
    },
    //页面渲染之前
    created() {
        this.fetchData()
        clueApi.getClueList()
        .then((response) => {
            this.clueList = response.data
        })
    },
    methods: {
        //批量删除
    batchRemove(){
      //判断非空
      if(this.multipleSelection.length===0){
        this.$message.warning('请选择要删除的记录！')
        return
      }
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList =[]
          //遍历数组
          this.multipleSelection.forEach(item => {
            idList.push(item.id)
          })
          honorApi.batchRemove(idList)
          .then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新
            this.fetchData()
          })
        });

    },
    //复选框发生变化
    handleSelectionChange(selection){
      this.multipleSelection = selection
      console.log(this.multipleSelection)
    },
    //跳转到添加表单页面
    add(){
      this.$router.push({path:'/honor/honorCreate'})
    },

    fetchData() {
      honorApi
        .pageList(this.pageNum, this.pageSize, this.searchObj)
        .then((response) => {
          this.list = response.data.records;
          this.total = response.data.total;
        });
    },
    //改变每页显示记录数
    changePageSize(size) {
      this.pageSize = size;
      this.fetchData();
    },
    //改变页码数
    changeCurrentPage(page) {
      this.pageNum = page;
      this.fetchData();
    },

    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    //删除单条信息
    removeById(id){
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          honorApi.removeHonorId(id)
          .then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新
            this.fetchData()
          })
        });
    }
    },
}
</script>